import { defineStore } from 'pinia'
import { store } from '../index'
import defaultSettings from '@/settings'
import { setCssVar, humpToUnderline } from '@/utils'
import { colourBlend } from '@/utils/color'
import { useCache } from '@/hooks/useCache'

const { wsCache } = useCache()

const storageSetting = wsCache.get('layout-settings') || ''

const setkey = (key) => {
  if (!defaultSettings.hasOwnProperty(key)) return
  return storageSetting[key] === undefined ? defaultSettings[key] : storageSetting[key]
}

export const useSettingsStore = defineStore({
  id: 'settings',
  state: () => ({
    // 组件尺寸大小
    sizeMap: [
      { label: '默认', value: 'default' },
      { label: '大', value: 'large' },
      { label: '小', value: 'small' }
    ],
    // 网页标题
    title: setkey('title'),
    // 显示设置
    showSettings: defaultSettings.showSettings,
    // 面包屑
    breadcrumb: setkey('breadcrumb'),
    // 面包屑图标
    breadcrumbIcon: setkey('breadcrumbIcon'),
    // 折叠图标
    hamburger: setkey('hamburger'),
    // 菜单手风琴
    uniqueOpened: setkey('uniqueOpened'),
    // 全屏图标
    screenfull: setkey('screenfull'),
    // 尺寸图标
    size: setkey('size'),
    // 标签页
    tagsView: setkey('tagsView'),
    // 标签页图标
    tagsViewIcon: setkey('tagsViewIcon'),
    // logo
    logo: setkey('logo'),
    // 固定header
    fixedHeader: setkey('fixedHeader'),
    // 灰色模式
    greyMode: setkey('greyMode'),
    // 动态标题
    dynamicTitle: setkey('dynamicTitle'),
    // layout布局
    layout: setkey('layout'),
    // 组件尺寸
    currentSize: setkey('currentSize'),
    // 主题相关
    theme: setkey('theme')
  }),
  getters: {
    getTitle() {
      return this.title
    },
    getSizeMap() {
      return this.sizeMap
    },
    getShowSettings() {
      return this.showSettings
    },
    getBreadcrumb() {
      return this.breadcrumb
    },
    getBreadcrumbIcon() {
      return this.breadcrumbIcon
    },
    getUniqueOpened() {
      return this.uniqueOpened
    },
    getHamburger() {
      return this.hamburger
    },
    getScreenfull() {
      return this.screenfull
    },
    getSize() {
      return this.size
    },
    getTagsView() {
      return this.tagsView
    },
    getTagsViewIcon() {
      return this.tagsViewIcon
    },
    getLogo() {
      return this.logo
    },
    getFixedHeader() {
      return this.fixedHeader
    },
    getGreyMode() {
      return this.greyMode
    },
    getDynamicTitle() {
      return this.dynamicTitle
    },
    getLayout() {
      return this.layout
    },
    getCurrentSize() {
      return this.currentSize
    },
    getTheme() {
      return this.theme
    }
  },
  actions: {
    setTitle(title) {
      this.title = title
    },
    setBreadcrumb(breadcrumb) {
      this.breadcrumb = breadcrumb
      this.setSetting('breadcrumb', this.breadcrumb)
    },
    setBreadcrumbIcon(breadcrumbIcon) {
      this.breadcrumbIcon = breadcrumbIcon
      this.setSetting('breadcrumbIcon', this.breadcrumbIcon)
    },
    setHamburger(hamburger) {
      this.hamburger = hamburger
      this.setSetting('hamburger', this.hamburger)
    },
    setUniqueOpened(uniqueOpened) {
      this.uniqueOpened = uniqueOpened
      this.setSetting('uniqueOpened', this.uniqueOpened)
    },
    setScreenfull(screenfull) {
      this.screenfull = screenfull
      this.setSetting('screenfull', this.screenfull)
    },
    setSize(size) {
      this.size = size
      this.setSetting('size', this.size)
    },
    setTagsView(tagsView) {
      this.tagsView = tagsView
      this.setSetting('tagsView', this.tagsView)
    },
    setTagsViewIcon(tagsViewIcon) {
      this.tagsViewIcon = tagsViewIcon
      this.setSetting('tagsViewIcon', this.tagsViewIcon)
    },
    setLogo(logo) {
      this.logo = logo
      this.setSetting('logo', this.logo)
    },
    setFixedHeader(fixedHeader) {
      this.fixedHeader = fixedHeader
      this.setSetting('fixedHeader', this.fixedHeader)
    },
    setGreyMode(greyMode) {
      this.greyMode = greyMode
      this.setSetting('greyMode', this.greyMode)
    },
    setDynamicTitle(dynamicTitle) {
      this.dynamicTitle = dynamicTitle
      this.setSetting('dynamicTitle', this.dynamicTitle)
    },
    setLayout(layout) {
      this.layout = layout
      this.setSetting('layout', this.layout)
    },
    setCurrentSize(currentSize) {
      this.currentSize = currentSize
      this.setSetting('currentSize', this.currentSize)
    },
    setTheme(theme) {
      this.theme = Object.assign(this.theme, theme)
      this.setSetting('theme', this.theme)
    },
    setCssVarTheme() {
      // 设置主题色
      for (const key in this.theme) {
        setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
      }

      [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((item) => {
        const lightColor = colourBlend(this.theme.elColorPrimary, '#ffffff', item / 10)
        const darkColor = colourBlend(this.theme.elColorPrimary, '#000000', item / 10)
        setCssVar(`--el-color-primary-light-${item}`, lightColor)
        setCssVar(`--el-color-primary-dark-${item}`, darkColor)
      })

      // 设置灰色模式
      setCssVar('filter', this.greyMode ? 'grayscale(100%)' : 'inherit')
    },
    // 修改布局设置
    setSetting(key, value) {
      if (this.hasOwnProperty(key)) {
        this[key] = value
        wsCache.set('layout-settings', this.$state)
      }
    }
  }
})

export const useSettingsStoreWithOut = () => {
  return useSettingsStore(store)
}
